<template>
  <view class="tree">
    <view v-if="currentResult.length == 0" @click="open" class="placeholder">{{ placeholder }}</view>
    <view v-else class="result" @click="open">
      <view v-for="v in currentResult" :key="v.id" class="single">
        <view class="title">{{ v[mate] }}</view>
        <view @click.stop="del(v)" class="delete">删除</view>
      </view>
    </view>
    <uni-popup ref="popup">
      <l-header noBack></l-header>
      <view class="title">
        <view @click="cancel" :style="{ color: '#000' }">取消</view>
        <view :style="{ color: '#000' }">请选择</view>
        <view @click="finish" :style="{ color: 'rgb(28, 169, 255)' }">确定</view>
      </view>
      <view class="pd20">
        <scroll-view class="scroll-view-box" :scroll-y="true">
          <checkbox-group @change="checkboxChange" class="checkbox">
            <view class="lists">
              <block v-for="item in data" :key="item.id">
                <label class="label">
                  <view class="value" @click.stop="changeShow(item)">
                    <image :style="{ opacity: item.child && item.child.length > 0 ? 1 : 0 }"
                      :src="img[item.isShow ? 1 : 0]" mode="aspactFill"></image>
                    {{ item[mate] }}
                  </view>
                  <view>
                    <checkbox :value="String(item.id)" :checked="item.checked" />
                  </view>
                </label>
                <checkbox-group @change="itemCheckboxChange($event, item)" class="checkbox">
                  <view class="lists">
                    <block v-for="jtem in item.child" :key="jtem.id">
                      <label class="label">
                        <view class="value" @click.stop="changeShow(jtem)">
                          <image :style="{ opacity: jtem.child && jtem.child.length > 0 ? 1 : 0 }"
                            :src="img[jtem.isShow ? 1 : 0]" mode="aspactFill"></image>
                          {{ jtem[mate] }}
                        </view>
                        <view>
                          <checkbox :value="String(jtem.id)" :checked="jtem.checked" />
                        </view>
                      </label>
                    </block>
                  </view>
                </checkbox-group>
              </block>
            </view>
          </checkbox-group>
        </scroll-view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import lTreeItem from "./l-tree-item.vue";
export default {
  components: { lTreeItem },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    mate: {
      type: String,
      default: "title",
    },
  },
  computed: {
    nav() {
      return uni.getStorageSync("navInfo");
    },
  },
  data() {
    return {
      placeholder: "请点击此处选择分类",
      result: [],
      dataToOne: [],
      currentResult: [],
      init: true,
      isFirst: false,
      img: ["../../static/img/icon/arrow-s.png", "../../static/img/icon/arrow-down-2.png"],
    };
  },
  watch: {
    data: {
      handler(v) {
        v.length > 0 && this.init && this.recur(v);
      },
      deep: true,
      immediate: true,
    },
    currentResult: {
      handler(v) {
        !this.isFirst && this.$emit("select", this.result.join(","));
      },
      deep: true,
    },
  },
  created() { },
  computed: {
    nav() {
      return uni.getStorageSync("navInfo");
    },
  },
  mounted() {
    // if (this.dataToOne.some((v) => v.checked == true)) {
    //   this.currentResult = this.dataToOne.filter((v) => v.checked == true);
    //   this.isFirst = true;
    // }
  },
  methods: {
    changeShow(v) {
      v.isShow = !v.isShow;
    },
    recur(arr) {
      this.init = false;
      if (arr.length > 0) {
        arr.map((v) => {
          this.dataToOne.push(v);
          v.child?.length > 0 && this.recur(v.child);
        });
      }
    },
    recurToSelect(arr) {
      if (arr.length > 0) {
        arr.map((v) => {
          v.checked = this.result.includes(String(v.id));
          v.child?.length > 0 && this.recurToSelect(v.child);
        });
      }
    },
    recurToDel(arr, id) {
      if (arr.length > 0) {
        arr.map((v) => {
          if (v.id == id) v.checked = false;
          v.child?.length > 0 && this.recurToDel(v.child, id);
        });
      }
    },
    checkboxChange(e) {
      this.isFirst = false;
      // this.result = e.detail.value;
      this.data.map(v => {
        if (v.child) v.child.map(a => a.checked = e.detail.value.includes(String(v.id)));
        v.checked = e.detail.value.includes(String(v.id));
      });
      // this.recurToSelect(this.data);
    },
    itemCheckboxChange(e, v) {
      this.data.map(a => {
        if (a.id == v.id) {
          a.child.map(b => b.checked = e.detail.value.includes(String(b.id)));
          a.checked = a.child.every(b => b.checked == true);
        }
      });
    },
    open() {
      this.$refs.popup.open("right");
    },
    cancel() {
      this.$refs.popup.close();
    },
    finish(e) {
      // this.currentResult = this.dataToOne.filter((a) => this.result.some((b) => b == a.id));
      this.currentResult = [];
      this.data.map(v => {
        if (v.child) {
          v.child.map(a => a.checked && this.currentResult.push(a));
        } else {
          v.checked && this.currentResult.push(v);
        }
      });
      this.cancel();
      this.$emit('finish', this.currentResult.map(v => { return v.id }));
    },
    removeDuplicates(arr, key) {
      const uniqueKeys = new Set();
      return arr.filter(obj => {
        const value = obj[key];
        if (!uniqueKeys.has(value)) {
          uniqueKeys.add(value);
          return true;
        }
        return false;
      });
    },
    del(v) {
      this.result = this.result.filter((a) => a != v.id);
      this.currentResult = this.currentResult.filter((a) => a.id != v.id);
      this.recurToDel(this.data, v.id);
    },
  },
};
</script>

<style lang="less" scoped>
// #ifndef MP-WEIXIN
/deep/ .right {
  padding-top: calc(var(--status-bar-height)) !important;
}

// #endif
/deep/ .header {
  background-color: transparent !important;
  pointer-events: none;
}

/deep/ .transition {
  height: 80%;
}

/deep/ .bottom {
  height: 100%;
  background-color: rgb(255, 255, 255) !important;
  // padding: 20upx;
  border-radius: 20upx 20upx 0 0;
}

.title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-size: 28upx;
  padding: 20upx;
  .border-1px(bottom);
}

.pd20 {
  padding: 20upx 20upx 20upx 0;
  overflow-y: scroll;
  height: calc(100% - 80upx);
}

// #ifdef MP-WEIXIN
.pd20 {
  height: calc(100% - 200upx);
}

// #endif

.scroll-view-box {
  height: 100%;
}

.scroll-view-box ::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}

.placeholder {
  color: #c7c7c8;
}

.result {
  .single {
    .flex();
  }
}

.lists {
  background: #fff;
  padding: 0 0 0 30upx;
}

.checkbox,
.radio {
  .label {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10upx 0;
    .border-1px(bottom);

    .value {
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 30upx;
      width: 50%;

      image {
        width: 24upx;
        height: 24upx;
        margin-right: 10upx;
      }
    }
  }
}

/deep/ .uni-checkbox-wrapper {
  margin-top: -8upx;
}
</style>
